<template>
	<div class="system-add-dept-container">
		<el-dialog :title="state.ruleForm.id ? '编辑' : '添加'" v-model="state.isShowDialog" width="600px" draggable>
			<el-form ref="dialogFormRef" :model="state.ruleForm" size="default" label-width="130px" :rules="rules">
				<el-row :gutter="35">
					<el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
						<el-form-item label="代理商名称" prop="companyname">
							<el-input v-model="state.ruleForm.companyname" placeholder="请输入代理商名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
						<el-form-item label="代理商地址" prop="companyaddress">
							<el-input v-model="state.ruleForm.companyaddress" type="textarea" placeholder="请输入代理商地址" maxlength="150"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="15" class="mb20">
						<el-form-item label="购买PC软件数量" prop="cnum">
							<el-input-number v-model="state.ruleForm.cnum" :min="0" controls-position="right" placeholder="请输入数量" class="w100" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemCompanyDialog">
// 后台接口
import { systemApi } from '/@/api/system/index';
const rules = reactive({
	companyname: [{ required: true, message: '请输入代理商名称', trigger: 'blur' }],
});
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const dialogFormRef = ref();
const state = reactive({
	isShowDialog: false,
	ruleForm: {
		id: '',
		companyname: '', // 代理商名称
		cnum: 0, // 购买PC软件数量
		companyaddress: '', // 代理商地址
		// createBy: '' //操作用户id
	},
});
// 打开添加弹窗
const openDialog = (row: RowUserType) => {
	state.isShowDialog = true;
	nextTick(() => {
		dialogFormRef.value.resetFields();  // 清空表单并移除校验结果，此项需加表单验证才能使用
		if (row) {
			state.ruleForm = JSON.parse(JSON.stringify(row));
		}else{
			state.ruleForm = {
				id: '',
				companyname: '', // 代理商名称
				cnum: 0, // 购买PC软件数量
				companyaddress: '', // 代理商地址
				// createBy: '' //操作用户id
			}
		}
	})
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 确定
const onSubmit = async () => {
	// 表单验证
	await dialogFormRef.value?.validate(async (valid: any) => {
		if (valid) {
			// 保存到数据库
			// state.ruleForm.createBy = store.state.userInfos.userInfos.id; //操作用户id
			let res: any = await systemApi().addCompany(state.ruleForm);
			if (res.success) {
				emit('refresh')
				ElMessage.success('操作成功');
			} else {
				ElMessage.error('操作失败');
			}
			closeDialog();
		}
	});
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
:deep(.el-input-number .el-input__inner){
	text-align: left;
}
</style>
